import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import Detail from "./Detail/index";
export default class Message extends Component {
  state = {
    list: [
      { id: "01", title: "message001" },
      { id: "02", title: "message002" },
      { id: "03", title: "message003" },
    ],
  };
  pushJump = (id, title) => {
    console.log(id, title);

    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`);
    // 携带state参数
    this.props.history.push("/home/message/detail", { id, title });
  };
  forward = () => {
    this.props.history.goForward();
  };
  back = () => {
    this.props.history.goBack();
  };
  go = () => {
    this.props.history.go(-2);
  };
  render() {
    const { list } = this.state;
    return (
      <div>
        <ul>
          {list.map((item) => {
            return (
              <li key={item.id}>
                {/* <Link
                  to={`/home/message/detail?id=${item.id}&title=${item.title}`}
                >
                  {item.title}
                </Link> */}
                <Link
                  to={{
                    pathname: "/home/message/detail",
                    state: { id: item.id, title: item.title },
                  }}
                >
                  {item.title}
                </Link>
                &nbsp;&nbsp;
                <button
                  onClick={() => {
                    this.pushJump(item.id, item.title);
                  }}
                >
                  push跳转
                </button>
              </li>
            );
          })}
        </ul>

        {/* <Route path="/home/message/detail/:id" component={Detail} /> */}
        {/* <Route path="/home/message/detail" component={Detail} /> */}
        <Route path="/home/message/detail" component={Detail} />
        <button onClick={this.forward}>前进</button>
        <button onClick={this.back}>后退</button>
        <button onClick={this.go}>go</button>
      </div>
    );
  }
}






